<template>
  <div class="warehousing-page">
    <el-container>
      <el-header height="auto">
        <el-card shadow="never">
          <el-form
            :inline="true"
            :model="formInline"
            label-width="auto"
            class="filter-form"
          >
            <el-form-item label="入库单号">
              <el-input
                v-model="formInline.warehousingCode"
                clearable
                placeholder="请输入"
                style="width: 180px"
              />
            </el-form-item>
            <el-form-item label="入库类型">
              <el-select
                v-model="formInline.warehousingTypeId"
                placeholder="请选择"
                clearable
                style="width: 160px"
              >
                <el-option 
                  v-for="item in warehousingTypeOptions" 
                  :key="item.warehousingTypeId" 
                  :label="item.warehousingName" 
                  :value="item.warehousingTypeId" 
                />
              </el-select>
            </el-form-item>
            <el-form-item label="单据状态">
              <el-select
                v-model="formInline.warehousingCodeState"
                placeholder="请选择"
                clearable
                style="width: 160px"
              >
                <el-option label="草稿" :value="0" />
                <el-option label="待审核" :value="1" />
                <el-option label="已完成" :value="2" />
                <el-option label="驳回" :value="3" />
              </el-select>
            </el-form-item>
            <el-form-item label="仓库名称">
              <el-select
                v-model="formInline.warehouseId"
                placeholder="请选择"
                clearable
                style="width: 180px"
                filterable
              >
                <el-option 
                  v-for="item in warehouseOptions" 
                  :label="item.warehouseName" 
                  :value="item.warehouseId" 
                />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-space>
                <el-button type="primary" @click="handleQuery">
                  查询
                </el-button>
                <el-button @click="handleReset">重置</el-button>
                <el-button @click="advancedVisible = true">
                  高级搜索
                </el-button>
              </el-space>
            </el-form-item>
          </el-form>
        </el-card>
      </el-header>
      <el-main>
        <el-card shadow="never">
          <div class="toolbar">
            <el-space wrap>
              <el-button
                type="success"
                size="small"
                @click="handleCreate"
              >
                新增
              </el-button>
              <el-button size="small" @click="handleBatchDelete">
                删除
              </el-button>
              <el-button size="small" @click="handleexcel">
                导出
              </el-button>
              <el-button size="small" @click="handleCopy">
                复制
              </el-button>
              <el-button size="small" @click="handleAudit">
                审核
              </el-button>
              <el-button size="small" @click="handleRevoke">
                撤销
              </el-button>
              <el-button size="small" @click="handleRefresh">
                刷新
              </el-button>
            </el-space>
          </div>
          <el-table
            ref="multipleTableRef"
            v-loading="loading"
            :data="tableData"
            row-key="warehousingId"
            border
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="50" />
            <el-table-column type="index" label="序号" width="70" />
            
            <el-table-column
              prop="warehousingCode"
              label="入库单号"
              min-width="120"
            >
            <template #default="scope">
              <a @click="handleDetail(scope.row)">{{ scope.row.warehousingCode }}</a>
            </template>
            </el-table-column>
            <el-table-column
              prop="warehousingName"
              label="入库类型"
              min-width="100"
            />
            <el-table-column
              prop="warehousingCodeStateName"
              label="状态"
              min-width="80"
            >
              <template #default="scope">
                <el-tag 
                  :type="getStatusTagType(scope.row.warehousingCodeState)"
                  size="small"
                >
                  {{ getStatusText(scope.row.warehousingCodeState) }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column
              prop="storageDate"
              label="入库日期"
              min-width="120"
            >
              <template #default="scope">
                {{ formatDate(scope.row.storageDate) }}
              </template>
            </el-table-column>
            <el-table-column
              prop="warehouseName"
              label="仓库名称"
              min-width="120"
            />
            <el-table-column
              prop="stockinGoodsNo"
              label="关联单号"
              min-width="120"
            />
            <el-table-column
              prop="productNames"
              label="入库货品"
              min-width="200"
              show-overflow-tooltip
            >
              <template #default="scope">
                <span :title="scope.row.productNames">{{ scope.row.productNames || scope.row.productName || '-' }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="userName"
              label="经办人"
              min-width="100"
            />
            <el-table-column
              prop="warehousingNum"
              label="入库数量"
              min-width="100"
              align="right"
            />
            <el-table-column
              prop="warehousingMoney"
              label="入库金额"
              min-width="120"
              align="right"
            >
              <template #default="scope">
                {{ Number(scope.row.warehousingMoney ?? 0).toFixed(2) }}
              </template>
            </el-table-column>
            <el-table-column
              prop="documentCreator"
              label="制单人"
              min-width="100"
            />
            <el-table-column label="操作" fixed="right" min-width="150">
              <template #default="scope">
                <el-button
                  v-if="canEdit(scope.row)"
                  link
                  type="primary"
                  size="small"
                  @click="handleEdit(scope.row)"
                >
                  编辑
                </el-button>
                <el-button
                  v-if="canDelete(scope.row)"
                  link
                  type="danger"
                  size="small"
                  @click="handleDelete(scope.row)"
                >
                  删除
                </el-button>
                <el-button
                  v-if="canRevoke(scope.row)"
                  link
                  type="warning"
                  size="small"
                  @click="handleRevokeSingle(scope.row)"
                >
                  撤销
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
        <el-card shadow="never" class="pagination-card">
          <div class="pagination-container">
            <div class="pagination-info">总{{ page.listCount }}条</div>
            <el-pagination
              v-model:current-page="page.pageindex"
              v-model:page-size="page.pagesize"
              :page-sizes="[10, 20, 50, 100]"
              :total="page.listCount"
              layout="prev, pager, next"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
            <el-select
              v-model="page.pagesize"
              style="width: 100px; margin-left: 10px"
              @change="handleSizeChange"
            >
              <el-option label="10条/页" :value="10" />
              <el-option label="20条/页" :value="20" />
              <el-option label="50条/页" :value="50" />
              <el-option label="100条/页" :value="100" />
            </el-select>
          </div>
        </el-card>
      </el-main>
    </el-container>

    <el-drawer
      v-model="advancedVisible"
      title="高级搜索"
      direction="rtl"
      size="500px"
    >
      <el-form
        :model="advancedForm"
        label-width="100px"
        class="advanced-form"
      >
        <el-row :gutter="16">
          <el-col :span="12">
            <el-form-item label="入库单号">
              <el-input v-model="advancedForm.warehousingCode" placeholder="请输入" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="入库类型">
              <el-select v-model="advancedForm.warehousingTypeId" placeholder="请选择" clearable style="width: 100%">
                <el-option 
                  v-for="item in warehousingTypeOptions" 
                  :label="item.warehousingName" 
                  :value="item.warehousingTypeId" 
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="16">
          <el-col :span="12">
            <el-form-item label="入库日期">
              <el-select v-model="advancedForm.storageDate" placeholder="请选择" clearable style="width: 100%">
                <el-option label="今天" value="today" />
                <el-option label="昨天" value="yesterday" />
                <el-option label="本周" value="thisWeek" />
                <el-option label="本月" value="thisMonth" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="单据状态">
              <el-select v-model="advancedForm.warehousingCodeState" placeholder="请选择" clearable style="width: 100%">
                <el-option label="草稿" :value="0" />
                <el-option label="待审核" :value="1" />
                <el-option label="已完成" :value="2" />
                <el-option label="驳回" :value="3" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="16">
          <el-col :span="12">
            <el-form-item label="制单人">
              <el-input v-model="advancedForm.documentCreator" placeholder="请输入" clearable>
                <template #append>
                  <el-button icon="Search" />
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="部门">
              <el-input v-model="advancedForm.organizationId" placeholder="请输入" clearable>
                <template #append>
                  <el-button icon="Search" />
                </template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="16">
          <el-col :span="12">
            <el-form-item label="制单时间">
              <el-select v-model="advancedForm.documentCreation" placeholder="请选择" clearable style="width: 100%">
                <el-option label="今天" value="today" />
                <el-option label="昨天" value="yesterday" />
                <el-option label="本周" value="thisWeek" />
                <el-option label="本月" value="thisMonth" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="仓库名称">
              <el-select v-model="advancedForm.warehouseId" placeholder="请选择" clearable style="width: 100%">
                <el-option 
                  v-for="item in warehouseOptions" 
                  :key="item.warehouseId" 
                  :label="item.warehouseName" 
                  :value="item.warehouseId" 
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="16">
          <el-col :span="12">
            <el-form-item label="关联人">
              <el-input v-model="advancedForm.contact" placeholder="请输入" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="客户名称">
              <el-select v-model="advancedForm.supplierId" placeholder="请选择" clearable style="width: 100%">
                <el-option 
                  v-for="item in supplierOptions" 
                  :key="item.supplierId" 
                  :label="item.supplierName" 
                  :value="item.supplierId" 
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="16">
          <el-col :span="12">
            <el-form-item label="经办人">
              <el-input v-model="advancedForm.userId" placeholder="请输入" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系方式">
              <el-input v-model="advancedForm.contact" placeholder="请输入" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="16">
          <el-col :span="12">
            <el-form-item label="经办人">
              <el-input v-model="advancedForm.userId" placeholder="请输入" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="入库数量">
              <el-input-number v-model="advancedForm.warehousingNum" placeholder="请输入" style="width: 100%" :min="0" />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="16">
          <el-col :span="12">
            <el-form-item label="入库金额">
              <el-select v-model="advancedForm.warehousingMoney" placeholder="请选择" clearable style="width: 100%">
                <el-option label="大于" value="gt" />
                <el-option label="小于" value="lt" />
                <el-option label="等于" value="eq" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="审核人">
              <el-input v-model="advancedForm.reviewerPeople" placeholder="请输入" clearable>
                <template #append>
                  <el-button icon="Search" />
                </template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="16">
          <el-col :span="24">
            <el-form-item label="审核时间">
              <el-select v-model="advancedForm.reviewTime" placeholder="请选择" clearable style="width: 100%">
                <el-option label="今天" value="today" />
                <el-option label="昨天" value="yesterday" />
                <el-option label="本周" value="thisWeek" />
                <el-option label="本月" value="thisMonth" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      
      <template #footer>
        <div class="drawer-footer">
          <el-button @click="handleAdvancedReset">重置</el-button>
          <el-button @click="advancedVisible = false">关闭</el-button>
          <el-button type="primary" @click="handleAdvancedConfirm">查询</el-button>
        </div>
      </template>
    </el-drawer>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import { ElMessage, ElMessageBox, type TableInstance } from 'element-plus'
import moment from 'moment'
import router from '@/router'
import myaxios from '@/http/MyAxios'

interface WarehousingItem {
  warehousingId: string
  warehousingCode: string
  warehousingTypeId: number
  warehousingCodeState: number
  warehousingCodeStateName: string
  storageDate: string
  warehouseId: number
  warehouseName: string
  stockinGoodsId: number
  stockinGoodsNo?: string
  productid: number
  productName?: string
  productNames?: string
  userId: number
  userName: string
  contact: string
  contactInformation: string
  warehousingNum: number
  warehousingMoney: number
  documentCreator: string
  organizationId: number
  organizationName: string
  documentCreation: string
  reviewerPeople: string
  reviewTime: string
  warehousingDescription: string
  supplierId: number
  supplierName: string
  warehousingName: string
}

const loading = ref(false)
const tableData = ref<WarehousingItem[]>([])
const multipleTableRef = ref<TableInstance>()
const multipleSelection = ref<WarehousingItem[]>([])
const advancedVisible = ref(false)

const formInline = reactive({
  warehousingCode: '',
  warehousingTypeId: '',
  warehousingCodeState: '',
  warehouseId: '',
})

const advancedForm = reactive({
  warehousingCode: '',
  warehousingTypeId: '',
  warehousingCodeState: '',
  warehouseId: '',
  stockinGoodsId: '',
  supplierId: '',
  userId: '',
  contact: '',
  storageDate: [] as string[],
  organizationId: '',
  productId: '',
  documentCreator: '',
  reviewerPeople: '',
  documentCreation: [] as string[],
  reviewTime: [] as string[],
  warehousingNum: null as number | null,
  warehousingMoney: '',
})

const page = reactive({
  pageindex: 1,
  pagesize: 10,
  listCount: 0,
  pageCount: 0,
})

// Options arrays
const warehousingTypeOptions = ref([{
  "warehousingTypeId": '',
      "warehousingName": ""
}])
const warehouseOptions = ref<any[]>([])
const supplierOptions = ref<any[]>([])


const fetchData = () => {
  myaxios.get('/api/Warehousing/GetWarehousing', {
    params: {
      warehousingCode: formInline.warehousingCode ,
      warehousingTypeId: formInline.warehousingTypeId,
      warehousingCodeState: formInline.warehousingCodeState,
      warehouseId: formInline.warehouseId,
      stockinGoodsId: advancedForm.stockinGoodsId,
      supplierId: advancedForm.supplierId,
      userId: advancedForm.userId,
      contact: advancedForm.contact,
      organizationId: advancedForm.organizationId,
      productId: advancedForm.productId,
      documentCreator: advancedForm.documentCreator,
      reviewerPeople: advancedForm.reviewerPeople,
      beginStorageDate: advancedForm.storageDate?.[0] ?? '',
      endStorageDate: advancedForm.storageDate?.[1] ?? '',
      beginDocumentCreation: advancedForm.documentCreation?.[0] ?? '',
      endDocumentCreation: advancedForm.documentCreation?.[1] ?? '',
      beginReviewTime: advancedForm.reviewTime?.[0] ?? '',
      endReviewTime: advancedForm.reviewTime?.[1] ?? '',
      pageindex: page.pageindex,
      pagesize: page.pagesize,
    }
  })
  .then(res => {
    if (res.data.success || res.data.code === 200) {
      tableData.value = res.data.data.data || []
      page.listCount = res.data.data.listCount || 0
      page.pageCount = Math.ceil(page.listCount / page.pagesize)
    }
  })
  .catch(error => {
    console.error('获取入库数据失败:', error)
  })
}
// Load options data
const loadWarehousingTypes = async () => {
  try {
    const response = await myaxios.get('/api/Warehousing/GetWarehousingType')
    if (response.data.success || response.data.code == 200) {
      warehousingTypeOptions.value = response.data.data 
    }
  } catch (error) {
    console.error('获取入库类型失败:', error)
  }
}

const loadWarehouses = async () => {
  try {
    const response = await myaxios.get('/api/Warehousing/GetWarehouse')
    if (response.data.success || response.data.code == 200) {
      warehouseOptions.value = response.data.data || []
    }
  } catch (error) {
    console.error('获取仓库列表失败:', error)
  }
}

const loadSuppliers = async () => {
  try {
    const response = await myaxios.get('/api/Warehousing/GetSupplierForExport')
    if (response.data.success || response.data.code === 200) {
      supplierOptions.value = response.data.data || []
    }
  } catch (error) {
    console.error('获取供应商列表失败:', error)
  }
}

onMounted(() => {
  fetchData()
  loadWarehousingTypes()
  loadWarehouses()
  loadSuppliers()
})

const handleQuery = () => {
  page.pageindex = 1
  fetchData()
}

const handleReset = () => {
  formInline.warehousingCode = ''
  formInline.warehousingTypeId = ''
  formInline.warehousingCodeState = ''
  formInline.warehouseId = ''
  page.pageindex = 1
  fetchData()
}

const handleAdvancedReset = () => {
  advancedForm.warehousingCode = ''
  advancedForm.warehousingTypeId = ''
  advancedForm.warehousingCodeState = ''
  advancedForm.warehouseId = ''
  advancedForm.stockinGoodsId = ''
  advancedForm.supplierId = ''
  advancedForm.userId = ''
  advancedForm.contact = ''
  advancedForm.storageDate = []
  advancedForm.organizationId = ''
  advancedForm.productId = ''
  advancedForm.documentCreator = ''
  advancedForm.reviewerPeople = ''
  advancedForm.documentCreation = []
  advancedForm.reviewTime = []
  advancedForm.warehousingNum = null
  advancedForm.warehousingMoney = ''
}

const handleAdvancedConfirm = () => {
  advancedVisible.value = false
  page.pageindex = 1
  fetchData()
}

const handleSelectionChange = (val: WarehousingItem[]) => {
  multipleSelection.value = val
}

const handleCreate = () => {
  router.push('/CreateWarehousing')
}

const handleDetail = (row: WarehousingItem) => {
  router.push({
    path: '/DetailWarehousing',
    query: { warehousingId: row.warehousingId},
  })
}

const handleEdit = (row: WarehousingItem) => {
  router.push({
    path: '/CreateWarehousing',
    query: { warehousingId: row.warehousingId },
  })
}

const handleDelete = (row: WarehousingItem) => {
  ElMessageBox.confirm('确认删除该入库单吗？', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(async () => {
      await myaxios.delete(
        `/api/Warehousing/DeleteWarehousing?warehousingId=${row.warehousingId}`,
      )
      ElMessage.success('删除成功')
      fetchData()
    })
    .catch(() => {})
}

const handleBatchDelete = () => {
  if (!multipleSelection.value.length) {
    ElMessage.warning('请选择需要删除的入库单')
    return
  }
  ElMessageBox.confirm(
    `确认删除选中的${multipleSelection.value.length}条入库单吗？`,
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    },
  )
    .then(async () => {
      const ids = multipleSelection.value.map((item) => item.warehousingId).join(',')
      await myaxios.delete(
        `/api/Warehousing/BatchDeleteWarehousing?warehousingIds=${ids}`,
      )
      ElMessage.success('批量删除成功')
      fetchData()
    })
    .catch(() => {})
}

const handleCopy = () => {
  if (!multipleSelection.value.length) {
    ElMessage.warning('请选择需要复制的入库单')
    return
  }
  const ids = multipleSelection.value.map((item) => item.warehousingId)
  myaxios
    .post(
      '/api/Warehousing/CopyWarehousing',
      ids,
    )
    .then(() => {
      ElMessage.success('复制成功')
      fetchData()
    })
    .catch(() => {
      ElMessage.error('复制失败')
    })
}

const handleRefresh = () => {
  fetchData()
}

// 审核
const handleAudit = () => {
  if (!multipleSelection.value.length) {
    ElMessage.warning('请选择需要审核的入库单')
    return
  }
  ElMessageBox.confirm(
    `确认审核选中的${multipleSelection.value.length}条入库单吗？`,
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    },
  )
    .then(async () => {
      const ids = multipleSelection.value.map((item) => item.warehousingId).join(',')
      try {
        const response = await myaxios.put('/api/Warehousing/BatchReviewWarehousing', null, {
          params: { 
            warehousingIds: ids,
            reviewerPeople: localStorage.getItem('username') || '系统'
          }
        })
        if (response.data && (response.data.success || response.data.code === 200)) {
          ElMessage.success('批量审核成功')
          fetchData()
        } else {
          ElMessage.error(response.data?.message || '批量审核失败')
        }
      } catch (error) {
        console.error('批量审核失败:', error)
        ElMessage.error('批量审核失败，请稍后重试')
      }
    })
    .catch(() => {})
}

// 撤销
const handleRevoke = () => {
  if (!multipleSelection.value.length) {
    ElMessage.warning('请选择需要撤销的入库单')
    return
  }
  ElMessageBox.confirm(
    `确认撤销选中的${multipleSelection.value.length}条入库单吗？`,
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    },
  )
    .then(async () => {
      const ids = multipleSelection.value.map((item) => item.warehousingId).join(',')
      try {
        const response = await myaxios.put('/api/Warehousing/BatchRevokeWarehousing', null, {
          params: { warehousingIds: ids }
        })
        if (response.data && (response.data.success || response.data.code === 200)) {
          ElMessage.success('批量撤销成功')
          fetchData()
        } else {
          ElMessage.error(response.data?.message || '批量撤销失败')
        }
      } catch (error) {
        console.error('批量撤销失败:', error)
        ElMessage.error('批量撤销失败，请稍后重试')
      }
    })
    .catch(() => {})
}

// 单个撤销
const handleRevokeSingle = (row: WarehousingItem) => {
  ElMessageBox.confirm('确认撤销该入库单吗？', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(async () => {
      try {
        const response = await myaxios.put('/api/Warehousing/RevokeWarehousing', null, {
          params: { warehousingId: row.warehousingId }
        })
        if (response.data && (response.data.success || response.data.code === 200)) {
          ElMessage.success('撤销成功')
          fetchData()
        } else {
          ElMessage.error(response.data?.message || '撤销失败')
        }
      } catch (error) {
        console.error('撤销失败:', error)
        ElMessage.error('撤销失败，请稍后重试')
      }
    })
    .catch(() => {})
}

// 分页大小变化
const handleSizeChange = () => {
  page.pageindex = 1
  fetchData()
}

// 页码变化
const handleCurrentChange = () => {
  fetchData()
}

const getStatusTagType = (status: number) => {
  switch (status) {
    case 0:
      return 'info' // 草稿
    case 1:
      return 'warning' // 待审核
    case 2:
      return 'success' // 已审核/已完成
    case 3:
      return 'danger' // 已取消/驳回
    default:
      return 'info'
  }
}

const getStatusText = (status: number) => {
  switch (status) {
    case 0:
      return '草稿'
    case 1:
      return '待审核'
    case 2:
      return '已完成'
    case 3:
      return '驳回'
    default:
      return '未知'
  }
}

// 判断是否可以编辑
const canEdit = (row: WarehousingItem) => {
  // 草稿、待审核、驳回状态可以编辑
  return row.warehousingCodeState === 0 || row.warehousingCodeState === 1 || row.warehousingCodeState === 3
}

// 判断是否可以删除
const canDelete = (row: WarehousingItem) => {
  // 草稿、待审核、驳回状态可以删除
  return row.warehousingCodeState === 0 || row.warehousingCodeState === 1 || row.warehousingCodeState === 3
}

// 判断是否可以撤销
const canRevoke = (row: WarehousingItem) => {
  // 已完成状态可以撤销
  return row.warehousingCodeState === 2
}

const formatDate = (date?: string) => {
  if (!date) return ''
  return moment(date).format('YYYY-MM-DD')
}


//导出
const handleexcel=()=>
{
  location.href=`http://localhost:8080/api/Warehousing/ImproerExcelWarehouseing?pageindex=1&pagesize=1000000`
}
</script>

<style scoped>
.warehousing-page {
  padding: 12px;
}

.toolbar {
  margin-bottom: 16px;
}

.pagination-card {
  margin-top: 16px;
}

.pagination-container {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 10px 0;
}

.pagination-info {
  margin-right: 20px;
  color: #606266;
  font-size: 14px;
}

:deep(.el-pagination) {
  justify-content: flex-end;
}

:deep(.el-pagination .el-pager li) {
  margin: 0 4px;
}

:deep(.el-pagination .el-pager li.is-active) {
  background-color: #67c23a;
  color: #fff;
}

.drawer-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
</style>

